
<template>
  <div class="manager">
    <router-view></router-view>
    <!-- 头部 -->
    <div class="header">
      易洁家政
    </div>
    <div class="Carousel_pictures">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="red">
        <van-swipe-item v-for="carousel in carouselData" :key="carousel.id">
          <img :src="carousel.url" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div style="height: 10px"></div>
    <!-- 宫格图片 -->
    <div class="imgBox">
      <div class="imgBox_item" @click="$router.push('/manager/order')"><img src="@/assets/order.png" alt=""><div>订单</div></div>
      <div class="imgBox_item" @click="$router.push('/manager/earning')"><img src="@/assets/order.png" alt=""><div>收益</div></div>
      <div class="imgBox_item"><img src="@/assets/order.png" alt=""><div>帮助</div></div>
      <div class="imgBox_item" @click="$router.push('/manager/mine')"><img src="@/assets/order.png" alt=""><div>我的</div></div>
    </div>
    <div class="Products_Show">
      {{userInfo.id}}
      <p>我的订单</p>
      <div v-for="order in order_From" :key="order.id" >
      <van-list
      >
        <van-cell >
          <div class="products_box" @click="toDetail(order)">
            <div class="products_photo">
            <img :src="order.customer.userFace" >
            </div>
            <div class="products_wrod">
              <ul>
                <li>
                  <span class="username">{{order.customer.username}}</span>
                  <span class="status">{{order.status}}</span>
                </li>
                <li>
                  <span class="world_ul">{{order.address.province}}{{order.address.city}}{{order.address.area}}{{order.address.address}}</span>
                </li>
                <li>
                  <span class="serviceTime">{{order.serviceTime |fmtDate_global}}</span>
                  <span class="orderprice" v-if="order.orderLines[0]">{{order.orderLines[0].price}}￥</span>
                </li>
              </ul>
            </div>
          </div>
        </van-cell>
      </van-list>
      </div>
    </div>
    <div style="height:50px">

    </div>
  </div>
</template>

<script>
import { get } from "@/http/axios";
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      imgUrl: "",
       list: [],
      error: false,
      loading: false,
      username:"",
      order_From:{},
      employeeId:0,
    };
  },
  methods: {
    ...mapActions('user',['getUserInfo']),
    ...mapActions("Home", ["getAllcarouselData","getAllorderData"]),
    
    // queryData(){
    //   console.log();
    // },
    
    toDetail(dindanId){
        //使用编程式导航
        this.$router.push({
            //路径
            path:'/manager/detail',
            //传参数
            query:{
                dindanId,
            }
        })

    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }

        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
    async getUserId() {
      let res = await get('/user/info?token='+localStorage.getItem('token'))
      this.employeeId = res.data.data.id;
      this.queryorderData();
      // console.log(res);
    },
    
    async queryorderData(){
      let data={
        pageSize:100,
        page:1,
        employeeId:this.employeeId
      }
      console.log(data.employeeId);
       let res = await get("/order/pageQuery",data);
      this.order_From = res.data.data.list;
      
    }
  },
  computed: {
    ...mapState("user",["token","userInfo"]),
    ...mapState("Home", ["carouselData","orderData"]),
  },
  created() {
    this.getUserId()
    this.getAllcarouselData();
    
  },
  mounted() {},
};
</script>

<style lang='scss' scoped>
.imgBox{
    height: 100px;
    
    padding: 0 15px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .imgBox_item{
      height: 80px;
      
      img{
        display: block;
        width: 62px;
        height: 62px;
      }
      div{
        text-align: center;
        padding-top: .5em;
        color: #666;
        font-size: 12px;
      }
    }
}
.header{
    width: 100%;
    height: 58px;
    background-image: linear-gradient(90deg, #bf73ff, #7579ff);
    text-align: center;
    line-height: 58px;
    color: #fff;
    letter-spacing: 0.4em;
}

.van-nav-bar__title{
  font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;
  font-size: 18px;
}
.Carousel_pictures{
  padding: 10px;
 
  
}
.van-swipe-item{
  border-radius: 10px;
}
.Carousel_pictures img{
  border-radius: 10px;
}
.Products_Show{
  padding: 10px;
}
.my-swipe,
.my-swipe img {
  width: 100%;
  height: 200px;
}
.slide_pictures {
  cursor: pointer;
  width: 100%;
  height: 30px;
}
.van-grid-item,
.van-grid-item img {
  width: 100%;
  height: 30px;
}
.img_word {
  width: 100%;
  text-align: center;
  font-family: "Courier New", Courier, monospace;
  font-size: 10px;
  color: rgba(212, 196, 196, 0.89);
}
.img_word:hover{
  color: rgba(115, 202, 243, 0.89);
}
.products_box{
  display: flex;
  width: 100%;
  margin-top: 5px;
  margin-bottom: 5px;
  box-shadow:  6px  #ccc;
}
.products_box img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.products_wrod{
  flex: 2;
  width: 40%;
  margin-left: 1em;
  margin-right: 1em;
}
.products_photo{
  height: 80px;
  width: 80px;
}
.username{
  float: left;
}
.status{
  float: right;
  color: rgb(238, 52, 20);
}
.products_wrod li{
  width: 100%;
  height: 30px;
}
.orderprice{
  float: right;
  color: rgb(253, 235, 71);
}
.serviceTime{
  float: left;
  font-size: 0.5pc;
  font-family: Arial, Helvetica, sans-serif;
}
.world_ul{
  font-size: 0.5pc;
}
.van-cell{
  width: 100%;
  height: 120px;
  margin-top: 10px;
  margin-bottom: 10px;
  box-shadow: 0 0 6px 0 ;
  border-radius: 10px;
  cursor: pointer;
}

</style>